<!DOCTYPE HTML>
<html>
<head>
<title>Login Admin</title>
<link href="css/login-style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

</head>
<body>

<div id="tip-box" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
		<h4 class="modal-title">警告:</h4>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	</div>
	<div class="modal-body">
		<p>{{error}}</p>
	</div>
	
	</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- contact-form -->	

<div class="message warning">
<div class="inset">

	<div class="login-head">
		<h1>Login Form</h1>
	</div>
	<div id="login-form">
		<form @submit.prevent="submit">
			<li>
				<input type="text" placeholder="Username" name="name" v-model="inputtext.name"><a href="#" class=" icon user"></a>
			</li>
				<div class="clear"> </div>
			<li>
				<input type="password" placeholder="Password" name="password" v-model="inputtext.password"><a href="#" class="icon lock"></a>
			</li>
			<div class="clear"> </div>
			<div class="submit">
				<input type="submit" value="Sign in" >
				<div class="clear"></div>	
			</div>
		</form>
	</div>
</div>					
</div>
<div class="clear"> </div>
<!--- footer --->
<div class="footer">
	<p>Copyright &copy; 2018.</p>
</div>

</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
$(document).ready(function(c) {
	$('.alert-close').on('click', function(c){
		$('.message').fadeOut('slow', function(c){
	  		$('.message').remove();
		});
	});	  
});

var vue = new Vue({
	el: '#login-form',
	data: {
		inputtext: {
			name: '',
			password: ''
		}
	},
	methods: {
		submit: function () {
			// console.log(this.inputtext.name)
			// console.log(this.inputtext.password)
			axiosPost({
				name: this.inputtext.name,
				password: this.inputtext.password
			})
		}
	}
})

var tipVue = new Vue({
	el: '#tip-box',
	data: {
		error: ''
	}
})

function axiosPost(data) {
	axios.post('/login', data)
		.then(function (response) {
			// console.log(response);
			processResopnse(response.data)
		})
		.catch(function (error) {
			console.log(error);
		});
}

function processResopnse(data) {
	// console.log(data)
	if ((!data.error) && data.success && data.redirect) {
		window.location.href = data.redirect
	} else {
		tipVue.error = data.error
		$('#tip-box').modal('toggle')
	}
}

</script>
</html>